<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        .el-menu.el-menu--horizontal{
            border-bottom: 0;
        }
        a{
            color: #000;
        }
        a:link {
            text-decoration: none;
        }
        a:visited{

        }
        a:hover{
        }
        a:active{
            color: #f00;
        }
        .el-menu--horizontal>.el-menu-item,.el-menu--horizontal>.el-submenu .el-submenu__title{
            color: #fff;
        }
        .box-card{
            background-color: rgba(200,200,200,0.6);
            border: none;
        }
        body{
            margin: 0;
        }
    </style>
</head>
<body>
<div id="app" style="margin: 0;padding: 0">
        <el-main style="padding: 0; overflow: hidden;">
                    <div style="background-image: url('imgs/index_1.jpg');margin: 0; height:1000px;background-size: 100% 100%; background-repeat:no-repeat">
                        <h1 style="margin:0;padding:0;font-size: 100px;left: 150px;top: 200px;position: relative;color: #ccc">强盛健身</h1>
                        <h1 style="left: 230px;top: 200px;position: relative;font-size: 70px;color: #ccc">让每个人都更健康</h1>

                        <div style="top:-100px;position:relative;right:250px;float:right;width: 400px;height: 400px;">
                        <el-card v-if="currentIndex==1" class="box-card">
                            <el-form label-width="80px">
                                    <h1 style="text-align: center">用户登录</h1>
                            <el-form-item label="用户名" >
                                <el-input type="text" v-model="user.username"></el-input>
                            </el-form-item>
                                <el-form-item label="密码">
                                    <el-input type="password" v-model="user.password"></el-input>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="info"><a href="javascript:void(0)" @click="login()">登录</a></el-button>
                                        <el-button @click="index2()" >去注册</el-button>
                                    </el-form-item>
                                </el-form>
                            </el-card>


                            <el-card v-if="currentIndex==2" class="box-card">
                                <el-form label-width="80px">
                                    <h1 style="text-align: center">用户注册</h1>
                                    <el-form-item label="昵称" >
                                        <el-input type="text" v-model="user.nickname"></el-input>
                                    </el-form-item>
                                    <el-form-item label="用户名" >
                                        <el-input type="text" v-model="user.username"></el-input>
                                    </el-form-item>
                                    <el-form-item label="密码" >
                                        <el-input type="password" v-model="user.password"></el-input>
                                    </el-form-item>
                                    <el-form-item label="电话">
                                        <el-input type="text" v-model="user.tel"></el-input>
                                    </el-form-item>
                                    <el-form-item label="用户角色">
                                        <el-checkbox v-model="user.isAdmin">管理员</el-checkbox>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-button type="info"><a href="javascript:void(0)" @click="reg()">注册</a></el-button>
                                        <el-button @click="index1()">去登录</el-button>
                                    </el-form-item>

                                </el-form>
                            </el-card>
                            </div>
                    </div>

        </el-main>
    <el-footer style="padding: 0">
        <div style="background-color: black;  color: #fff;text-align: center;padding: 10px 0">
            <p>Copyright © 北京强盛健身有限公司版权所有 </p>
            <p>涵盖20余门课程体系，致力于打造权威的健身学习平台</p>
            <p>健身网站WWW.qiangshenjianshen.cn 专注于健身技能培训</p>
        </div>
    </el-footer>

</div>
</body>
<!--引入axios和vue框架文件-->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                user: {},
                currentIndex:1,
                activeIndex: '1',
                activeIndex2: '1'
            }
        },
        methods:{
            login() {
                axios.post("/user/login",v.user).then(function (response) {
                    if (response.data == 1) {
                        alert("登录成功")
                    }else if (response.data == 2) {
                        alert("用户不存在")
                    }else if (response.data == 3) {
                        alert("密码错误")
                    }
                })
            },
            reg() {
                axios.post("/user/reg", v.user).then(function (response) {
                    if (response.data == 1) {
                        alert("注册成功")
                        v.currentIndex=1;
                    }else {
                        alert("用户已经存在")
                    }
                });
            },
            index1(){
              v.currentIndex=1;
            },
            index2(){
                v.currentIndex=2;
            },
            handleSelect(key, keyPath) {
                //key代表index   keyPath代表详细的位置
                console.log(key, keyPath);
            }
        }
    })
</script>
</html>